<template>
  <div>
    <div class="dashboard-container">
      <span class="little"></span>
      <div class="dashboard-text">示范基地申报年审</div>
    </div>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <div class="tittlebox">
        <!-- 总数 -->
        <div class="yellowbox">
          <div class="leftbox">
            <img src="../../img/nested1.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="sum">{{ sum }}</div>
            <div>总数</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 待认证 -->
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../img/nested2.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ toBeCertified }}</div>
            <div>待审核</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../images/shenhezhong.jng.png" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ authenticating }}</div>
            <div>审核中</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 已通过-->
        <div class="redbox">
          <div class="leftbox">
            <img src="../../img/nested3.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="process">{{ rejected }}</div>
            <div>已驳回</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 已拒绝 -->
        <div class="greenbox">
          <div class="leftbox">
            <img src="../../img/nested4.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="noprocess">{{ alreadyPassed }}</div>
            <div style="width: 70px">审核通过</div>
          </div>
        </div>
      </div>
      <el-form :model="form" class="inquire">
        <el-row>
          <el-col :span="6">
            <el-form-item style="margin-right: 10px">
              <el-input v-model="form.input" prefix-icon="el-icon-search" placeholder="申报企业">
                <i slot="suffix" class="el-icon-circle-close" @click="form.input = ''"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item class="status">
              <el-select v-model="form.dropdown">
                <el-option label="国家级" value="0"></el-option>
                <el-option label="省级" value="1"></el-option>
                <el-option label="市级" value="2"></el-option>
                <!-- <el-option label="无" value="3"></el-option> -->
                <el-option label="全部" value="0,1,2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item class="larryreserve">
              <!-- <div style="display: flex;"> -->
                <button style="background: #216cff;color: #fff;" @click="submitForm"
                    class="larrysubmitForm">查询</button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="boxcard-bottom">
      <!-- 表格-->
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" :border="false" :show-overflow-tooltip="false" stripe
          class="bigtable">
          <el-table-column type="index" label="序号" width="70px" :index="indexMethod"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template slot-scope="{ row }">
              <span :class="getStatusClass(row.pprovalStatus)">
                {{ getStatusText(row.pprovalStatus) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申报企业">
            <template slot-scope="{ row }">
              {{ row.qyName }}
            </template>
          </el-table-column>
          <el-table-column label="申报级别">
            <template slot-scope="{ row }">
              <div v-if="row.applicationLevel === 0">国家级</div>
              <div v-if="row.applicationLevel === 1">省级</div>
              <div v-if="row.applicationLevel === 2">市级</div>
              <div v-if="row.applicationLevel === 3">无</div>
            </template>
          </el-table-column>
          <el-table-column label="申报时间">
            <template slot-scope="{ row }">
              {{ row.gmtCreate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="申报信息">
            <template slot-scope="{ row }">
              <i class="el-icon-share" style="margin-right: 4px; color: #216cff"></i>
              <button style="color: #216cff;background: transparent;border: 0;" @click="openoption(row.id, row)"
                :disabled="showExampleBtn.disabled">申报审批</button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: flex;justify-content: center;">
                <div>
                  <button size="mini" type="primary" @click="approvalsuccess(scope.row.id, scope.row)" style="
                        display: inline-block;
                        width: 52px;
                        height: 24px;
                        color: #039757;
                        font-size: 16px;
                        font-weight: 500;
                        margin-left: 10px;
                        margin-right: 10px;
                        border: 1px solid #039757;
                        border-radius: 4px 4px 4px 4px;
                        background: transparent;
                      " v-if="scope.row.pprovalStatus === 0 || scope.row.pprovalStatus === 3"
                    :disabled="showExampleBtn.disabled">通过</button>
                </div>
                <div>
                  <button size="mini" type="danger" @click="approvalrejected(scope.row.id)" style="
                        display: inline-block;
                        width: 52px;
                        height: 24px;
                        color: #f39800;
                        font-size: 16px;
                        font-weight: 500;
                        margin-right: 10px;
                        border: 1px solid #f39800;
                        border-radius: 4px 4px 4px 4px;
                        background: transparent;
                      " v-if="scope.row.pprovalStatus === 0 || scope.row.pprovalStatus === 3"
                    :disabled="showExampleBtn.disabled">驳回</button>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination background align="center" class="footerpage" layout="prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="currentPage"
        :page-size="pageSize">
      </el-pagination>
      <div>
        <el-dialog :visible="dialogtoshow" :before-close="closewindow" width="1000px" append-to-body
          style="margin-left: 100px">
          <div style="margin-top: -20px; margin-bottom: 20px; color: #1285d7">
            【年审申请资料】
          </div>
          <el-table :data="means" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="70px" align="center"></el-table-column>
            <el-table-column prop="name" label="资料名称">
              <template slot-scope="{ row }"><span style="color: #fd8544">{{
                row.dataName | flitt()
              }}</span></template>
            </el-table-column>
            <el-table-column prop="uploaded" label="已上传资料">
              <template slot-scope="{ row }">
                <p v-for="item in row.fileNameList" :key="item.fileId" @click="getFileId(item.fileId)">
                  <span v-if="item.fileName" style="cursor: pointer;">{{ item.fileName }}</span>
                  <!-- <span style="cursor: pointer;">{{ item.fileId }}</span> -->
                </p>
              </template>
            </el-table-column>
            <el-table-column label="是否通过" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.pprovalStatus" @change="
                  handleRadioChange(scope.row, scope.row.id, scope.row.pprovalStatus)
                  ">
                  <el-radio :label="1" :disabled="isRadioDisabled">是</el-radio>
                  <el-radio :label="2" :disabled="isRadioDisabled">否</el-radio>
                </el-radio-group>
                <div style="margin-top: 10px;cursor: pointer;color: #409eff;" @click="lookapprovalinput(scope.row)">审核意见
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 相关资料 -->
          <!-- <div style="color: #1285d7; margin-top: 20px">【相关资料】</div>
          <el-table :data="information" style="width: 100%; margin-top: 20px" border>
            <el-table-column type="index" label="序号" width="70px" align="center"></el-table-column>
            <el-table-column prop="name" label="资料名称">
              <template slot-scope="{ row }"><span style="color: #fd8544">{{
                row.dataName | flitt()
              }}</span></template>
            </el-table-column>
            <el-table-column prop="uploaded" label="已上传资料">
              <template slot-scope="{ row }">
                <p v-for="item in row.fileNameList" :key="item.fileId" @click="getFileId(item.fileId)">
                  <span v-if="item.fileName" style="cursor: pointer;">{{ item.fileId }}</span>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="是否通过" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.pprovalStatus" @change="
                  handleRadioChangetwo(scope.row.id, scope.row.pprovalStatus)
                ">
                  <el-radio :label="1" :disabled="isRadioDisabled">是</el-radio>
                  <el-radio :label="2" :disabled="isRadioDisabled">否</el-radio>
                </el-radio-group>
                <div style="margin-top: 10px;cursor: pointer;color: #409eff;" @click="lookapprovalinput(scope.row)">审核意见
                </div>
              </template>
            </el-table-column>
          </el-table> -->
          <div class="tablebtn">
            <el-button @click="tablelocal" style="background: #1285d7;color: #fff;">确定</el-button>
          </div>
          <el-dialog title="审核意见" :visible.sync="dialogVisible" class="opinion" align="center" append-to-body
            close-on-press-escape :showClose="false">
            <el-form label-position="top">
              <el-form-item>
                <el-input v-model="approvallist.comment" type="textarea" :rows="8" placeholder="请输入审核意见"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closedialogVisible" type="primary" plain>取 消</el-button>
              <el-button style="background: #1285d7;color: #fff;" @click="saveComment">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog :visible="approvalinput" append-to-body title="审核意见" width="30%" close-on-press-escape
            :before-close="closeDialog">
            <el-input v-model="commentapproval" type="textarea" id="inputcomment" disabled :rows="8"></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="approvalinput = false">关闭</el-button>
            </span>
          </el-dialog>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  // getthreesum,
  // getthreelist,
  // countMainStatus,
  // getDeclarationInformation,
  // getQyUserByUsername,
  // declarationInformation,
  // applicationReview,
  getFileName,
  yearapproval,
  checkoutdetail,
  passAnnual,
  mainTable,
  yearcount,
  yearselectLike
} from "@/api/demonstrations";
import { getfile } from '@/api/user'
export default {
  name: "Dashboard",
  data() {
    return {
      form: {
        input: "",
        dropdown: "0,1,2",
      },
      commentapproval: '',
      commentreject: '',
      value: "",
      tableData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 5, // 每页的数据条数
      approvalinput: false,
      approvallist: {
        comment: "",
        commenttwo: '同意'
      },
      sum: "",
      toBeCertified: "",
      alreadyPassed: "",
      rejected: "",
      authenticating: "",
      means: [],
      information: [],
      requestlist: [],
      dialogVisible: false,
      dialogtoshow: false,
      currentRow: null,
      adminId: this.$store.state.user.userInfo.id,
      masterId: "",
      commId: "",
      postData: {
        applicationLevel: '',
        id: ''
      }
    };
  },
  created() {
    this.getthreelist();
    this.countMainStatus();
    // console.log(this.adminId);
  },
  methods: {
    // 模糊查询
    submitForm() {
      // 提交表单的逻辑
      yearselectLike({
        type: 1,
        qyName: this.form.input,
        level: this.form.dropdown,
        page: this.currentPage,
        size: this.pageSize,
      }).then((res) => {
        if (res.data.state === 20000) {
          const newresList = res.data.data.records;
          this.tableData = newresList;
        }
      });
    },
    lookapprovalinput(row) {
      console.log(row);
      this.approvalinput = true
      if (row.pprovalStatus === 1) {
        console.log(1);
        this.commentapproval = row.approvalOpinion
      } else if (row.pprovalStatus === 2) {
        console.log(2);

        this.commentapproval = row.approvalOpinion
      } else {
        this.commentapproval = '暂无意见'
      }
    },
    resetForm() {
      // 重置表单的逻辑
      this.getthreelist();
    },
    // 查看总数
    countMainStatus() {
      yearcount({ type: 1 }).then((res) => {
        this.sum = res.data.data.count;
        this.toBeCertified = res.data.data.count0;
        this.alreadyPassed = res.data.data.count1;
        this.rejected = res.data.data.count2;
        this.authenticating = res.data.data.count3
      });
    },
    openoption(id, row) {
      this.dialogtoshow = true;
      this.postData.id = id
      this.postData.applicationLevel = row.applicationLevel
      checkoutdetail({ id: id, type: 1, level: row.applicationLevel }).then((res) => {
        if (res.data.state === 20000) {
          let means = [];
          let information = [];
          for (let i = 0; i < res.data.data.length; i++) {
            let item = res.data.data[i];
            if (item.dataType === 0) {
              means.push(item);
            } else if (item.dataType === 1) {
              information.push(item);
            }
          }
          // console.log(means);
          means.forEach(item => {
            item.fileNameList = []
            item.axioyNameList = []
            // console.log(means);
            if (item.uploadDataFileId.length > 0) {
              item.uploadDataFileId = item.uploadDataFileId.split(',')
              // let fileIdName = []
              item.uploadDataFileId.forEach(items => {
                getFileName({ fileId: items }).then(res => {
                  // console.log(item);
                  let obj = {
                    fileId: items,
                    fileName: res.data.data
                  }
                  item.fileNameList.push(obj)
                  // console.log(item.fileNameList);
                })
              })
            } else {
              item.uploadDataFileId = [item.uploadDataFileId]
            }
          })
          information.forEach(item => {
            item.fileNameList = []
            item.axioyNameList = []
            if (item.uploadDataFileId.length > 0) {
              item.uploadDataFileId = item.uploadDataFileId.split(',')
              item.uploadDataFileId.forEach(items => {
                getFileName({ fileId: items }).then(res => {
                  // console.log(item);
                  let obj = {
                    fileId: items,
                    fileName: res.data.data
                  }
                  item.fileNameList.push(obj)
                  // console.log(item.fileNameList);
                })
              })
            } else {
              item.uploadDataFileId = [item.uploadDataFileId]
            }
          })


          this.means = means
          this.information = information
          console.log(this.information);
        } else {
          this.$message.error('获取数据失败')
          this.dialogtoshow = false
        }
        // console.log(this.information);
        console.log(this.means);
      });
    },
    closeDialog() {
      this.approvalinput = false
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getthreelist();
    },
    // 申请资料部分
    closewindow() {
      this.dialogtoshow = false;
      this.getthreelist()
      this.countMainStatus()
    },
    // 申请资料弹窗返回表格
    returntable() {
      this.dialogtoshow = false;
    },
    tablelocal() {
      this.dialogtoshow = false
      this.getthreelist()
      this.countMainStatus()
    },
    closedialogVisible() {
      this.tableData.comment = "";
      this.dialogVisible = false;
    },
    handleRadioChange(scope, id, row) {
      console.log(scope.id);
      console.log(id);
      if (row === 1) {
        passAnnual({
          adminId: this.adminId,
          approvalStatus: 1,
          declarationId: id,
          approvalOpinion: this.approvallist.commenttwo,
        }).then(res => {
          if (res.data.state === 20000) {
            const data = {
              applicationLevel: this.postData.applicationLevel
            }
            this.openoption(this.postData.id, data)
          }
        })
      }
      if (row === 2) {
        this.dialogVisible = true;
        this.commId = id;
        this.approvallist.comment = "";
      }
    },
    handleRadioChangetwo(id, row) {
      console.log(row);
      if (row === 1) {
        // console.log(id);
        passAnnual({
          adminId: this.adminId,
          approvalStatus: 1,
          approvalOpinion: this.approvallist.commenttwo,
          declarationId: id,
        }).then(res => {
          if (res.data.state === 20000) {
            const data = {
              applicationLevel: this.postData.applicationLevel
            }
            this.openoption(this.postData.id, data)
          }
        })
      }
      if (row === 2) {
        this.dialogVisible = true;
        this.commId = id;
        this.approvallist.comment = "";
      }
    },
    saveComment() {
      if (this.approvallist.comment.trim().length <= 0) {
        this.$message.warning('请先输入审核意见')
      } else {
        passAnnual({
          adminId: this.adminId,
          approvalStatus: 2,
          approvalOpinion: this.approvallist.comment,
          declarationId: this.commId
        }).then(res => {
          if (res.data.state === 20000) {
            const data = {
              applicationLevel: this.postData.applicationLevel
            }
            this.openoption(this.postData.id, data)
          }
        })
        this.dialogVisible = false;
      }
    },
    // 审核通过
    async approvalsuccess(id, row) {
      const resp = await checkoutdetail({ id: id, type: 1, level: row.applicationLevel });
      console.log(resp);
      for (let i = 0; i < resp.data.data.length; i++) {
        if (resp.data.data[i].pprovalStatus !== 1) {
          this.$message.warning("资料审批含有未通过");
          return;
        }
      }
      this.$confirm("确定审核通过吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return mainTable({
            adminId: this.adminId,
            applicationId: id,
            approvalStatus: 1,
          });
        })
        .then((res) => {
          if (res.data.state === 20000) {
            // 在这里调用接口
            this.$message({
              type: "success",
              message: "审批成功!",
            });
            // location.reload();
            this.getthreelist();
            this.countMainStatus();
            this.$forceUpdate() // 手动更新组件
          } else {
            this.$message({
              type: "error",
              message: "审批失败请稍后重试",
            });
          }
        })
    },
    approvalrejected(id) {
      this.$confirm("确定驳回审批吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 提交审批操作，返回 Promise
          return mainTable({
            adminId: this.adminId,
            applicationId: id,
            approvalStatus: 2,
          });
        })
        .then((res) => {
          if (res.data.state === 20000) {
            // 审批操作完成后执行更新
            this.$message({
              type: "success",
              message: "驳回成功!",
            });
            this.getthreelist();
            this.countMainStatus();
            this.$forceUpdate(); // 手动更新组件
          } else {
            this.$message({
              type: "error",
              message: "审批失败请稍后重试",
            });
          }
        })
    },
    getFileId(id) {
      console.log(id);
      getfile({ fileId: id }).then(res => {
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })

    },
    // 动态class的方法,根据状态的不同显示不同的颜色
    getStatusClass(status) {
      switch (status) {
        case 0:
          return "blue-text";
        case 1:
          return "green-text";
        case 2:
          return "red-text";
        case 3:
          return "other"
        default:
          return "";
      }
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return "待审核";
        case 1:
          return "已通过";
        case 2:
          return "已驳回";
        case 3:
          return "审核中"
        default:
          return "";
      }
    },
    getthreelist() {
      yearapproval({
        page: this.currentPage,
        size: this.pageSize,
        type: 1,
      }).then((res) => {
        const { records, total } = res.data.data;
        this.tableData = records;
        this.total = total;
      });
    },
  },
  computed: {
    ...mapGetters(["name"]),
    indexMethod: function () {
      return (this.currentPage - 1) * (this.pageSize) + 1
    },
    showExampleBtn() {
      const userRoles = this.$store.state.user.userInfo.id;
      if (userRoles == 2) {
        return {
          disabled: false,
        };
      } else {
        return {
          disabled: true,
        };
      }
    },
    isRadioDisabled() {
      if (this.approvalstatus === 1 || this.approvalstatus === 2) {
        return true
      } else {
        return false
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.el-card__body {
  box-shadow: none;
}

.el-card {
  box-shadow: none;
  border: none;
}

.dashboard-container {
  display: flex;
  padding: 10px 26px 8px 26px;

  .little {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #3064fc;
    margin-right: 6px;
  }

  .dashboard-text {
    font-size: 16px;
  }
}

.box-card {
  width: 99%;
  height: 210px;
  margin-left: 8px;
  // margin-right: 12px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;

  .tittlebox {
    display: flex;
    justify-content: space-between;

    .yellowbox,
    .bluebox,
    .redbox,
    .greenbox {
      display: flex;
      justify-content: center;
      align-items: center;

      .rightbox {
        :nth-child(2) {
          width: 48px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #2e2e2e;
          // line-height: 10px;
        }
      }

      .sum {
        font-weight: bold;
        color: #fabc00;
      }

      .certified {
        font-weight: bold;
        color: #1e6ceb;
      }

      .process {
        font-weight: bold;
        color: #f46e3e;
      }

      .noprocess {
        font-weight: bold;
        color: #31a952;
      }
    }
  }

  // 表单
  .inquire {
    margin-top: 30px;
    margin-left: 16px;
  }

  // 认证状态
  .status {
    margin-left: 50px;
  }

  // 查询
  .larryreserve {
    margin-left: 20px;

    .larrysubmitForm {
      width: 105px;
      height: 40px;
      border: 0;
      border-radius: 5px;
      // margin-right: 20px;
      background: #4777e8;
    }
  }
}

.dashedbox {
  display: inline-block;
  margin-top: 34px;
  height: 20px;
  width: 1px;
  border: 1px solid #eaedf2;
  margin-right: 30px;
  margin-left: 2px;
  // width: 10px;
}

// 下方卡片区域
.boxcard-bottom {
  margin-top: 10px;
  width: 99%;
  max-height: 1200px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
}

/* 鼠标移过时的样式 */
button:disabled:hover {
  cursor: not-allowed;
  background-color: red;
}

/* 正常情况下的样式 */
button:not(:disabled) {
  cursor: pointer;
}
</style>
<!-- 表格样式css -->
<style >
.table-container {
  /* padding: 60px; */
}

.table-container .el-table__header th {
  color: #216cff;
  font-size: 16px;
  background-color: #f3f6fb;
  /* border: 1px solid #e5e5e3; */
  text-align: center;
}

.table-container .el-table__body td {
  /* border: 1px solid #ddd; */
  text-align: center;
  font-weight: bold;
}

/* 三种状态的不同显示颜色 */
.blue-text {
  color: #2675c0;
}

.green-text {
  color: #31a952;
}

.red-text {
  color: #f46e3e;
}

.other {
  color: #15b0bc
}

.footerpage {
  margin-top: 40px;
}
</style>
<!-- 申请资料弹窗样式 -->
<style lang="scss" >
.el-table__header th {
  background-color: #409eff;
  color: #fff;
  text-align: center;
}

.el-table__body td {
  // background-color: #409EFF;
  // color: #fff;
  // text-align: center;
}

.write {
  display: block;
  margin-top: 8px;
  margin-left: 10px;
  color: #409eff;
  text-align: center;
}

.opinion {
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
}

.tablebtn {
  margin-left: 460px;
  margin-top: 30px;

  :nth-child(1) {
    width: 91px;
    height: 34px;
    color: #fff;
    text-align: center;
    line-height: 2px;
    background: #1285d7;
  }

  :nth-child(2) {
    width: 91px;
    height: 34px;
    line-height: 2px;
    color: red;
    text-align: center;
    background: #1285d7;
  }
}

#inputcomment {
  color: #52a6fb;
}
</style>